<template>
  <div class="box">
    <header class="header">
      <van-nav-bar :title="column+ '-' +brand"
                   left-arrow
                   @click-left="$router.back('')" />
    </header>
    <div class="content"
         ref="cont">
      <van-dropdown-menu>
        <van-dropdown-item v-model="value"
                           :options="option" />
        <van-dropdown-item title="筛选"
                           ref="item">
          <van-cell center
                    title="请输入价格区间:">
            <input type="text"
                   class="min"
                   placeholder="0"
                   v-model="min">
            ~
            <input type="text"
                   class="max"
                   v-model="max">
          </van-cell>
          <div style="padding: 5px 16px;">
            <van-button type="danger"
                        block
                        round
                        @click="onConfirm">
              确认
            </van-button>
          </div>
        </van-dropdown-item>
      </van-dropdown-menu>
      <van-card v-for="item in list"
                :key="item.proId"
                :num="item.stock"
                :price="item.price"
                :desc="item.introduce"
                :title="item.proName"
                :thumb="item.mainImg"
                @click="fn(item.proId)" />
      <!-- <van-icon name="back-top"
                class="toTop"
                v-show="flag"
                @click="gotoTop" /> -->
    </div>
  </div>
</template>

<script>
import Vue from 'vue'
import { NavBar, Icon, Toast, Popup, DropdownMenu, DropdownItem, Card } from 'vant'
import { getColumnBrandList } from '../../api/index'

Vue.use(NavBar)
Vue.use(Icon)
Vue.use(Toast)
Vue.use(DropdownMenu)
Vue.use(Popup)
Vue.use(DropdownItem)
Vue.use(Card)

export default {
  data () {
    return {
      column: this.$route.query.column,
      brand: this.$route.query.brand,
      value: 0,
      option: [
        { text: '价格排序', value: 0 },
        { text: '价格升序', value: 1 },
        { text: '价格降序', value: 2 }
      ],
      min: null,
      max: null,
      list: [],
      searchList: [],
      flag: false
    }
  },
  methods: {
    onConfirm () {
      this.$refs.item.toggle()
      this.list = JSON.parse(JSON.stringify(this.searchList))
      if ((!this.min || !this.max) && this.min !== 0 && this.max !== 0) {
        Toast('缺少筛选范围')
      } else {
        this.list = this.list.filter(val => {
          return val.price <= Math.max(this.min, this.max) && val.price >= Math.min(this.min, this.max)
        })
      }
    },
    // gotoTop () {
    //   this.$refs.cont.scrollTop = 0
    // },
    fn (proId) {
      this.$router.push('/detail/' + proId)
    }

  },
  watch: {
    value (a) {
      console.log(a)
      if (a === 1) {
        this.list.sort((a, b) => {
          return a.price - b.price
        })
      } else if (a === 2) {
        this.list.sort((a, b) => {
          return b.price - a.price
        })
      } else {
        this.list = this.searchList
      }
    }
  },
  mounted () {
    getColumnBrandList({
      column: this.$route.query.column,
      brand: this.$route.query.brand
    }).then(res => {
      // console.log(res)
      this.searchList = res.data.data
      // axios返回的响应对象,有可能会被浅拷贝的数据修改&brand=' + brand)
      this.list = JSON.parse(JSON.stringify(res.data.data))
      // const that = this
      // this.$refs.cont.addEventListener('scroll', function () {
      //   //   console.log(that.$refs.cont.scrollTop)
      //   if (that.$refs.cont.scrollTop > 500) {
      //     that.flag = true
      //   } else {
      //     that.flag = false
      //   }
      // })
    })
  }

}
</script>

<style>
#app .box .header {
  height: 0.46rem;
  text-align: center;
  font: 0.24rem/0.46rem "";
}
</style>
